<template>
  <div class="system-log p-4">
    <!-- 页面标题 -->
    <div class="mb-4">
      <h2 class="text-lg font-medium">系统日志</h2>
    </div>

    <!-- 标签页 -->
    <el-tabs v-model="activeTab">
      <el-tab-pane label="模块访问统计" name="statistics">
        <ModuleStatistics />
      </el-tab-pane>
      <el-tab-pane label="平台访问日志" name="accessLog">
        <AccessLog />
      </el-tab-pane>
      <el-tab-pane label="平台操作日志" name="operationLog">
        <OperationLog />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ModuleStatistics from './components/ModuleStatistics.vue'
import AccessLog from './components/AccessLog.vue'
import OperationLog from './components/OperationLog.vue'

// 当前激活的标签页
const activeTab = ref('statistics')
</script>

<style scoped>
.system-log {
  .el-tabs {
    background-color: #fff;
    padding: 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
}
</style> 